<template>
  <view class="postPage">
    <!-- <view class="custom-nav-bar"> -->
    <!-- 页面标题 -->
    <!-- <view class="nav-title">发帖</view>
    </view> -->
    <u-navbar
      title="发帖"
      :autoBack="true"
      :fixed="true"
      :bgColor="'#ffffff'"
      :placeholder="true"
      :titleStyle="{
        color: '#333',
        fontSize: '16px',
      }"></u-navbar>
    <view class="tabcont">
      <view
        v-for="(tab, index) in list1"
        :key="index"
        :class="['tab-item', { active: currentId === index }]"
        @click="handleClick(index)">
        {{ tab.name }}
        <view class="line" v-show="currentId === index"></view>
      </view>
    </view>
    <!-- <u-tabs :list="list1" @click="handleClick" :scrollable="false"></u-tabs> -->
    <view v-if="currentId == 0">
      <publishHouse :type="1"></publishHouse>
    </view>

    <view v-if="currentId == 1">
      <publishNotice :type="1"></publishNotice>
    </view>
    <view v-if="currentId == 2">
      <publishShop :type="1"></publishShop>
    </view>
  </view>
</template>
<script>
import publishNotice from "@/pages-landlord/publish/publish-notice.vue";
import publishShop from "@/pages-landlord/publish/publish-shop.vue";
import publishHouse from "@/pages-landlord/publish/publish-house.vue";
export default {
  components: {
    publishShop,
    publishNotice,
    publishHouse,
  },
  data() {
    return {
      tabs: [
        { title: "Tab 1", content: "这是 Tab 1 的内容" },
        { title: "Tab 2", content: "这是 Tab 2 的内容" },
        { title: "Tab 3", content: "这是 Tab 3 的内容" },
      ],
      currentId: 0,
      currentTab: 0,
      list1: [
        {
          name: "房屋转租",
        },
        {
          name: "便民广告",
        },
        {
          name: "商家优惠",
        },
      ],
    };
  },
  methods: {
    handleClick(item) {
      console.log("item", item);
      this.currentId = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-nav-bar {
  height: 50px; /* 导航栏高度 */
  display: flex;
  align-items: center;
  color: #000;
  padding-top: 30px;
}
.tabcont {
  display: flex;
}
.line {
  width: 32rpx;
  height: 6rpx;
  background: #ff9900;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255, 153, 0, 0.3);
  border-radius: 4rpx;
  margin-left: 66rpx;
  margin-top: 5rpx;
}
.tab-item {
  flex: 1;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-align: center;
}

.tab-item.active {
  // border-bottom-color: #0095f8; /* 选中状态的下划线颜色 */
  color: #ff9900; /* 选中状态的文字颜色 */
  font-weight: bold;
}
.nav-back {
  flex: 0 0 auto;
  cursor: pointer;
}
.nav-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 17px;
  color: #000000;
}
</style>
